<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 0 auto;
        width: 700px;
      }
      .goodsimg {
        width: 80px;
        height: 80px;
      }
      .goodsnum {
        width: 50px;
        text-align: center;
      }
      .foot {
        width: 700px;
        margin: 0 auto;
        position: relative;
      
        &>span , button{
            position: absolute;
           
        }
        .del {
            left: 0;
            top: 10px;
        }
        .delcart {
            left: 150px;
            top: 10px;
        }
        .setnum {
            right: 150px;
            top: 10px;
        }
        .goby {
            right: 0;
            background-color: red;
            padding: 10px 20px;
            border: 0;
            color: white;
        }
      }
    </style>
  </head>
  <body>
    <table class="box">
      <thead>
        <tr>
          <th><input class="allchecked" onclick="setallselect(this)" type="checkbox" name="" id="" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
       
      </tbody>
    </table>
    <div class="foot">
      <span class="del" onclick="delopengoods()">删除所选商品</span>
      <span class="delcart" onclick="clearcart()">清理购物车</span>
      <span class="setnum">选择<span class="nums" style="color: red;">4</span>件商品总价<span class="price" style="color: red;">￥70</span></span>
      <button class="goby">去结算</button>
    </div>

    <script>

        let goods = [
            {
                select:true, //选中状态
                img:'https://s21.ax1x.com/2024/03/12/pF6I7nS.png',//图
                price:15,//单价
                num:1,//数量
                goodsname:'牛奶',
                id:1

            },
            {
                select:true, //选中状态
                img:'https://s21.ax1x.com/2024/03/12/pF6I7nS.png',//图
                price:25,//单价
                num:1,//数量
                goodsname:'牛奶',
                id:2

            },
            {
                select:true, //选中状态
                img:'https://s21.ax1x.com/2024/03/12/pF6I7nS.png',//图
                price:35,//单价
                num:1,//数量
                goodsname:'牛奶',
                id:3

            },
            {
                select:false, //选中状态
                img:'https://s21.ax1x.com/2024/03/12/pF6I7nS.png',//图
                price:45,//单价
                num:5,//数量
                goodsname:'牛奶',
                id:4

            }, {
                select:true, //选中状态
                img:'https://s21.ax1x.com/2024/03/12/pF6I7nS.png',//图
                price:55,//单价
                num:1,//数量
                goodsname:'牛奶',
                id:5

            }
        ]
        // 删除
        function deldom(id){
            // goods.forEach((item,index)=>{
            //     if (item.id==id) {
            //         console.log(index);
                    
            //     }
            // })
            // 查找符合条件的元素下标
            let index = goods.findIndex(item=>item.id==id)
           goods.splice(index,1)
           console.log(goods);
           setdom()
           setallprice()
        }
        // 修改数量
        function setnum(id,nl){
            console.log(id,nl);

            let item = goods.find(item=>item.id==id)
            // 防止出现负数
            item.num =  item.num+nl
            item.num = item.num<0?0:item.num
           setdom()
           setallprice()
            
        }
        // 全选
        function setallselect(e){
            let state = e.checked
            goods.forEach(item=>item.select=state)
            setdom()
            setallprice()
        }
        // 反选
        function selectone(id){
            let item = goods.find(item=>item.id==id)
            console.log(item.select);
            
            item.select  = !item.select

            // 判断现在是不是全选的
           let types = goods.every(item=>item.select)
           console.log(types,165);
           
           document.querySelector('.allchecked').checked = types
           setallprice()
            console.log(item.select);
        }
        // 计算总价
        function setallprice(){

            let allprice = goods.reduce((old,item)=>{
              // 上一次运算结果+价格*数量*状态
                return old+item.price*item.num*item.select
            },0)
              document.querySelector('.price').innerHTML = '￥'+allprice
            console.log(allprice);
            

        }
        setallprice()
        setdom()
        // 渲染dom
        function setdom() {
            let trs = ''
            goods.forEach(item=>{
                trs+= `
                <tr>
          <th><input onclick="selectone(${item.id})"  class="checked" type="checkbox" ${item.select?'checked':''} name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="${item.img}"
              alt=""
            /><br />${item.goodsname}
          </th>
          <th>￥<span>${item.price}</span></th>
          <th>
            <button class="min" onclick="setnum(${item.id},-1)">-</button
            ><input class="goodsnum" value="${item.num}" type="text" />
            <button class="max" onclick="setnum(${item.id},1)">+</button>
          </th>
          <th>￥<span class="all">${item.num*item.price}</span></th>
          <th onclick="deldom(${item.id})">删除</th>
        </tr>
                `
            })
            // console.log(trs);
            document.querySelector('tbody').innerHTML = trs
            
        }

    </script>
  </body>




</html>
